<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_wql960',
'ZY_BingChengGongJiangJingShen_1',
'ZY_TiGongQuanFangWeiQing_2',
'ZY_XinXingGaoQiangXiTu_3',
'ZY_TeSeChanPin_4',
'ZY_XiTu_5',
'ZY_6_6',
'ZY_GaoQiangDuDiMi_7',
'g_8',
'ZY_XiTu_9',
'img_xd98a10',
'ZY_GaoQiangDu_11',
'ZY_12_12',
'ZY_HanJieXingNeng_13',
'ZY_HanJieXiShu_14',
'ZY_15_15',
'ZY_16_16',
'img_jnjxg17',
'ZY_HanJieXing_18',
'ZY_19_19',
'ZY_ZheSeXingNeng_20',
'ZY_YangJiYangHuaWei_21',
'ZY_TongGuoTianJia_22',
'img_CJNve23',
'ZY_ZheSeXing_24',
'ZY_25_25',
'ZY_NaiFuShiXing_26',
'ZY_JingJianFuShiJi_27',
'img_YYMzW28',
'img_SvJ6229',
'ZY_NaiFuShi_30',
'ZY_31_31',
'ZY_JiaGongXingNeng_32',
'ZY_JiYaXiShu_33',
'ZY_XiTu_34',
'img_t1eIU35',
'ZY_JiaGongXing_36',
'ZY_GuoJunBiaoRenZheng_37',
'img_fbzoU38',
'img_twW4i39',
'img_fvO_M40',
'img_g7rCJ41',
'img_WikpI42'
"  ></cms:ads>
<!doctype html>
<html>
 <head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1,"> 
  <link rel="icon" sizes="any" href="${浏览器logo}">
  <title>湖南佳拓新材料有限公司官网${网页标题}</title> 
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/jkxcen/pc/css/swiper-bundle.min.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/jkxcen/pc/css/animate.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/jkxcen/pc/css/common.css">
  <style>.box{ padding: 90px 0; } 
		.box-bg4{ background: url(https://hwfile.csxuncong.com/jkxcen/pc/images/authenticationBg.png) no-repeat;
		background-size: 100% 100%; } 
		.list .item{ overflow: hidden; margin-top: 100px; position: relative; }
		.list .item{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.list .item:nth-child(2n){
			flex-direction: row-reverse;
		}
		.list .item .left{ width: 40%; font-size: 18px; color: #6D7074; box-sizing: border-box; }
		.list .item .left .num{ font-size: 80px; color: #2F2F2F; } 
		.list .item .left .left-top{
			display: flex;
			align-items: center;
		}
		.list .item:nth-child(2n) .left .left-top{
			flex-direction: row-reverse;
		}
		.list .item:nth-child(2n) .left .num{ margin-left: 20px; }
		.list .item:nth-child(2n+1) .left .num{ margin-right: 20px; }
		.list .item:nth-child(2n) .left .performance-warp{ text-align: right; }
		.list .item:nth-child(2n+1) .left .performance-warp{ text-align: left; }
		.list .item .left .performance-content{
			font-size: 16px;
			line-height: 20px;
		}
		.list .item .left .performance-warp{ padding: 12px 0; }
		.list .item .left .performance{ font-size: 22px; color: #2F2F2F; font-weight: bold; margin-bottom: 18px; }
		.list .item .left .line-warp{ margin-top: 60px; width: 100%; }
		.list .item .left .line-warp .line-text{ line-height: 30px; width: 100%; }
		.list .item:nth-child(2n) .left .line-warp .line-text{ text-align: right; }
		.list .item:nth-of-type(2) .left{width: 50%;}
		.left .line-warp .line-text img{width: 100%; margin: 20px 0;}
		.list .item .right{ width: 40%; }
		.list .item .right img{ width: 100%; }
		.list .item .bg{ position: absolute; width: 70%; height: 100%; background: #f3f3f3; z-index: -9; }
		.list .item:nth-child(2n) .bg{ left: 0; }
		.list .item:nth-child(2n+1) .bg{ right: 0; }
		.list .item .bottom-text{ position: absolute; bottom: 0; font-size: 12px; color: #D4D8DE; }
		.list .item:nth-child(2n) .bottom-text{ right: 0; }
		.list .item:nth-child(2n+1) .bottom-text{ left: 0; }
		.box .certificate-warp .img:nth-child(5){ top: 225px; left: 940px; }</style>
  <meta name="keywords" content="湖南佳拓新材料有限公司">
  <meta name="description" content="湖南佳拓新材料有限公司">
 </head> 
 <body> 
  <jsp:include page="_topWithBanner.jsp"></jsp:include>
  <div class="box"> 
   <div class="container"> 
    <h2 class="title animated wow slideInDown zy" data-type="ad" data-id="${ZY_TeSeChanPin_4.adId}">${ZY_TeSeChanPin_4.adTitle}</h2> 
    <p class="sub-title animated wow slideInDown zy" data-type="ad" data-id="${ZY_XiTu_5.adId}" style="font-size: 28px;">${ZY_XiTu_5.adTitle}</p> 
    <div class="list">

     <cms:ad var="products" code="featuredProduct"></cms:ad>
     <c:forEach items="${products }" varStatus="count" var="item">
      <c:if test="${count.index != 0}">
      <div class="item">
       <div class="${count.index % 2 == 0 ? 'left animated wow fadeInLeftSmall' : 'left animated wow fadeInRightSmall'}" data-wow-delay="0s">
        <div class="left-top">
         <p class="num zy">${count.index}</p>
         <div class="performance-warp">
          <p class="performance zy">${item.adTitle}</p>
          <p class="performance-content zy">${item.adInfo2}</p>
         </div>
        </div>
        <div class="line-warp">
         <div class="line-text">
          <c:if test="${item.adInfo3 != null}">
           <p class="zy">${item.adInfo3}</p>
          </c:if>
          <c:if test="${item.adInfo5 != null}">
           <img src="${item.adInfo5}" class="zy">
          </c:if>
         </div>
        </div>
       </div>
       <div class="${count.index % 2 == 0 ? 'right animated wow fadeInRightSmall' : 'right animated wow fadeInLeftSmall'}" data-wow-delay="0.2s">
        <img src="${item.adImg}" alt="" class="zy">
       </div>
       <div class="bg"></div>
       <p class="${count.index % 2 == 0 ? 'bottom-text animated wow fadeInLeftSmall zy' : 'bottom-text animated wow fadeInRightSmall zy'}" data-wow-delay="0.4s">${item.adTitle}</p>
      </div></c:if>
     </c:forEach>
    </div> 
   </div> 
  </div> 
  <div class="box box-bg4"> 
   <div class="container"> 
    <h2 class="title zy" data-type="ad" data-id="${ZY_GuoJunBiaoRenZheng_37.adId}">${ZY_GuoJunBiaoRenZheng_37.adTitle}</h2> 
    <div class="certificate-warp flex align-center space-center"> 
     <img class="img wow animated fadeInUpA zy" data-wow-delay="0s" src="${img_fbzoU38.adImg}" data-type="ad" data-id="${img_fbzoU38.adId}"> 
     <img class="img wow animated fadeInUpA zy" data-wow-delay="0.2s" src="${img_twW4i39.adImg}" data-type="ad" data-id="${img_twW4i39.adId}"> 
     <img class="img wow animated fadeInUpA zy" data-wow-delay="0.4s" src="${img_fvO_M40.adImg}" data-type="ad" data-id="${img_fvO_M40.adId}"> 
     <img class="img wow animated fadeInUpA zy" data-wow-delay="0.6s" src="${img_g7rCJ41.adImg}" data-type="ad" data-id="${img_g7rCJ41.adId}"> 
     <img class="img wow animated fadeInUpA zy" data-wow-delay="0.8s" src="${img_WikpI42.adImg}" data-type="ad" data-id="${img_WikpI42.adId}"> 
    </div> 
   </div> 
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include>  
  <script src="https://hwfile.csxuncong.com/jkxcen/pc/js/swiper-bundle.min.js"></script>
  <script src="https://hwfile.csxuncong.com/jkxcen/pc/js/wow.min.js"></script>
  <script>
		var itemEls = document.getElementsByClassName('nav-item-hover');
		for(var i= 0; i < itemEls.length;i++){
		    itemEls[i].onmouseover = function(){
		        var els = this.getElementsByClassName('nav-layout');
				var img = this.getElementsByClassName('nav-img')
		        if(els.length) {
		            els[0].style.display = 'block'
					img[0].src = 'https://hwfile.csxuncong.com/jkxcen/pc/images/fangxiang-shang.png'
		        };
		    }
		    itemEls[i].onmouseout = function(){
		        var els = this.getElementsByClassName('nav-layout');
				var img = this.getElementsByClassName('nav-img')
		        if(els.length) {
		            els[0].style.display = 'none'
					img[0].src = 'https://hwfile.csxuncong.com/jkxcen/pc/images/fangxiang-xia.png'
		        };
		    }
		}
		
		
        var swiper = new Swiper('.banner .mySwiper', {
            loop:true,
			slidesPerView:1,
            autoplay : true,
            pagination: {
				el: ".swiper-pagination",
				type: "bullets",
            },
        });
		
		var wow = new WOW({
		    boxClass: 'wow',
		    animateClass: 'animated',
		    offset: 0,
		    mobile: true,
		    live: true
		});
		wow.init();
    </script> 
 </body>
</html>